<template>
  <div class="body">
    <ul class="bottom">
      <router-link to="/"> <li v-changeColor="{ active: activeTab === 'home' }" @click="changeState('home')">
        <i class="iconfont icon-imagetext"><div>首页</div></i>
      </li></router-link>
       <router-link  to="/fenlei">  <li v-changeColor="{ active: activeTab === 'category' }" @click="changeState('category')">
        <i class="iconfont icon-viewgallery"><div>分类</div></i>
      </li></router-link>
       <router-link  to="/buycard">
      <li v-changeColor="{ active: activeTab === 'cart' }" @click="changeState('cart')">
        <i class="iconfont icon-cart"><div>购物车</div></i>
      </li></router-link>
       <router-link  to="/PerSon"> <li v-changeColor="{ active: activeTab === 'profile' }" @click="changeState('profile')">
        <i class="iconfont icon-account"><div>我的</div></i>
      </li></router-link> 
    </ul>
  </div>
</template>

<script>
export default {
    directives: {
    changeColor: {
        beforeMount(el, binding) {
        // 初始化指令，设置元素的初始颜色
        el.style.color = binding.value.active ? 'red' : 'black';
      },
      updated(el, binding) {
        // 监听指令的更新，根据传入的 active 属性来切换颜色
        el.style.color = binding.value.active ? 'red' : 'black';
      }
    }
  },
    data() {
    return {
      // activeTab: 'home' // 默认选中的标签
    };
  },
  computed:{
    activeTab(){
      return this.$store.state.BottomState
    }
  },
  methods:{
    changeState(value){
   
     this.$store.commit('changeState',value);
    }
  }
};
</script>

<style lang="scss" scoped>

.body {
  padding-top: 10px;
  width: 100%;
  border-top: 1px solid rgb(173, 154, 154);
  overflow-x: hidden;
  position: absolute;
  z-index: 100;
  bottom: 0;
  left: 0;
  .bottom {
    
    display: flex;
    position: relative;
    bottom: 0;
    left: 0;
    justify-content: space-between;
    align-items: flex-end; 
  }
}
</style>
